@import '~antd/es/style/themes/default.less';

.container {
    height: 100vh;
    overflow: auto;
    background: url('~@public/images/bg.png');
    background-position-x: left;
    background-position-y: top;
    background-size: cover;

    .book {
        position: absolute;
        right: 10%;
        bottom: 20%;
    }

    .logo {
        position: absolute;
        top: 62px;
        left: 76px;
    }

    .form {
        position: absolute;
        top: calc(50vh - 175px);
        left: 13%;
        width: 400px;
        height: 350px;

        .tab {
            text-align: center;
            :global {
                .ant-tabs-tab {
                    color: #fff;
                    font-size: 16px;
                }
                .ant-tabs-ink-bar {
                    background-color: transparent;
                }
            }
        }

        :global {
            .ant-row {
                margin-bottom: 12px;

                .ant-form-item-control-input {
                    .ant-form-item-control-input-content {
                        .ant-input-affix-wrapper {
                            height: 45px;
                            margin-right: 12px !important;
                            background-color: #213551;
                            border-color: #213551;
                            .ant-input-prefix {
                                color: #d2d2d2;
                            }
                            .ant-input {
                                padding-left: 10px;
                                color: #d2d2d2;
                                background-color: inherit;
                            }
                            .anticon,
                            .ant-input-password-icon.anticon {
                                color: #d2d2d2;
                            }
                        }
                        .ant-btn {
                            height: 45px;
                            color: #999;
                            background-color: #213551;
                            border-color: #213551;
                        }
                    }
                }
            }

            .ant-divider-horizontal {
                &.ant-divider-with-text {
                    border-top-color: #d2d2d2;

                    .ant-divider-inner-text {
                        color: #d7d7d7;
                        font-size: 14px;
                    }
                }
            }
        }

        .loginBtn {
            height: 45px;
            padding: unset;
            font-weight: 400;
            font-size: 24px;
            background: #082271;
            border-color: #082271;
        }

        .other {
            .otherLogin {
                float: left;
                text-align: left;
                .item {
                    display: inline-block;
                    width: 60px;
                    margin-right: 33px;
                    font-size: 14px;
                    text-align: center;
                    cursor: pointer;

                    img {
                        margin-bottom: 13px;
                    }
                }
            }
            .tool {
                float: right;
                width: 60px;
                margin-right: 5px;
                padding: 15px 0;

                button:first-child {
                    margin-bottom: 5px;
                    font-size: 14px;
                }

                .forgetBtn {
                    color: #d7d7d7;
                }
            }
        }
    }
}

@media only screen and (max-width: @screen-xl) {
    .container {
        .book {
            right: 5%;
            bottom: 18%;
            zoom: 0.5;
        }
    }
}

@media only screen and (min-width: @screen-xl) and (max-width: @screen-xxl) {
    .container {
        .book {
            right: 5%;
            bottom: 15%;
            zoom: 1;
        }
    }
}

@media only screen and (min-width: @screen-xxl) {
    .container {
        .book {
            bottom: 12%;
            zoom: 1.3;
        }
    }
}
